import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { actionCreators } from './store';

import { Input, Button, Steps, Form, Select, Radio} from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';

const { Option } = Select;

//func为过滤方法，operator为多过滤条件逻辑，columnTypes列属性
const operators = [
  { key: 0, text: '无', value: 0 },
  { key: 1, text: '或', value: 1 },
  { key: 2, text: '与', value: 2 },
  { key: 3, text: '或非', value: 3 },
  { key: 4, text: '与非', value: 4 },
  { key: 5, text: '无', value: 5 },
  { key: 6, text: '异或', value: 6 },
];

const columnTypes = [
  { key: 0, text: 'Int', value: 0 },
  { key: 1, text: 'Binary', value: 1 },
  { key: 2, text: 'Float', value: 2 },
  { key: 3, text: 'String', value: 3 },
  { key: 4, text: 'text', value: 4 },
]
const funcs = [
  { key: 0, text: '等于', value: 0 },
  { key: 1, text: '不等于', value: 1 },
  { key: 2, text: '小于', value: 2 },
  { key: 3, text: '小于等于', value: 3 },
  { key: 4, text: '大于', value: 4 },
  { key: 5, text: '大于等于', value: 5 },
  { key: 6, text: '正则表达式', value: 6 },
  { key: 7, text: '为空', value: 7 },
  { key: 8, text: '不为空', value: 8 },
  { key: 9, text: '在数组中', value: 9 },
  { key: 10, text: '包括', value: 10 },
  { key: 11, text: '以...开头', value: 11 },
  { key: 12, text: '以...结尾', value: 12 },
  { key: 13, text: '类似', value: 13 },
  { key: 14, text: '为真', value: 14 },
]

class FieldFilter extends Component{
  state={
  }

  render(){
    return (
      <Fragment>
        <Form.List name="filter">
          {(fields, { add, remove }) => {
            return (
              <div>
                {fields.map((field, index) => (
                  <div key={field.key} style={{backgroundColor:'#f0f2f5', padding:8, margin:'8px 0'}}>
                    <Form.Item
                    label="字段选择"
                    name={[field.name, "name"]}
                    fieldKey={[field.fieldKey, "name"]}
                    rules={[
                      {
                        required: true,
                        message: '请选择字段！',
                      },
                    ]}
                    >
                      <Select placeholder="请选择字段">
                        {
                          this.props.inputField.map(item=>(
                            <Option key={item.fieldName} value={item.fieldName}>{item.fieldName}</Option>
                          ))
                        }
                      </Select>
                    </Form.Item>
                    <Form.Item
                    label="列属性"
                    name={[field.name, "type"]}
                    fieldKey={[field.fieldKey, "type"]}
                    rules={[
                      {
                        required: true,
                        message: '请选择列属性！',
                      },]}>
                        <Select placeholder="请选择列属性">
                        {
                          columnTypes.map(item => (
                            <Option key={item.key} value={item.value}>{item.text}</Option>
                        ))}
                        </Select>
                    </Form.Item>
                    <Form.Item
                    label="过滤方法"
                    name={[field.name, "func"]}
                    fieldKey={[field.fieldKey, "func"]}
                    rules={[
                      {
                        required: true,
                        message: '请选择过滤方法！',
                      },]}>
                        <Select placeholder="请选择过滤方法">
                        {funcs.map(item => (
                          <Option key={item.key} value={item.value}>{item.text}</Option>
                        ))}
                        </Select>
                    </Form.Item>
                    <Form.Item
                    label="过滤条件"
                    name={[field.name, "text"]}
                    fieldKey={[field.fieldKey, "text"]}
                    rules={[
                      {
                        required: true,
                        message: '请输入过滤条件！',
                      },]}>
                        <Input placeholder="请输入过滤条件"/>
                    </Form.Item>
                    {
                      fields.length>1?(
                        <Form.Item
                        label="多过滤条件逻辑"
                        name={[field.name, "operator"]}
                        fieldKey={[field.fieldKey, "operator"]}
                        rules={[
                          {
                            required: true,
                            message: '请选择多过滤条件逻辑！',
                          },]}>
                            <Select placeholder="请选择多过滤条件逻辑">
                            {operators.map(item => (
                              <Option key={item.key} value={item.value}>{item.text}</Option>
                            ))}
                            </Select>
                        </Form.Item>
                      ):null
                    }
                    
                    {fields.length > 1&&field.key>0 ? (
                    <Form.Item noStyle>
                      <Button
                      onClick={() => {
                        remove(field.name);
                      }}>
                        <MinusCircleOutlined/>删除该组字段过滤
                      </Button>
                    </Form.Item>
                    ) : null}
                  </div>
                ))}
              <Form.Item noStyle>
                <Button
                  type="dashed"
                  onClick={() => {
                    add();
                  }}
                >
                  <PlusOutlined />新增一组字段过滤
                </Button>
              </Form.Item>
            </div>
            );
          }}
        </Form.List>
      </Fragment>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    inputField: state.getIn(['createTask','inputField']).toJS(),
  }
}

const mapDispatchToProps = (dispatch) => ({
})

export default connect(mapStateToProps, mapDispatchToProps)(FieldFilter);